<template>
	<div class="app-mob-preset-qrcode">
		<template v-if="QRCodeConfig.url">
			<vue-qr
				class="app-vue-qr"
				:size="QRCodeConfig.size"
				:text="QRCodeConfig.url"
				:bgSrc="QRCodeConfig.bgSrc"
				:margin="QRCodeConfig.margin"
				:backgroundColor="QRCodeConfig.backgroundColor"
				:logoSrc="QRCodeConfig.logoSrc"
				:logoMargin="QRCodeConfig.logoMargin"
				:logoBackgroundColor="QRCodeConfig.logoBgColor"
				:logoCornerRadius="QRCodeConfig.logoRadius"
				:whiteMargin="QRCodeConfig.whiteMargin"
			>
			</vue-qr>
		</template>
	</div>
</template>
<script lang="ts" setup>
import { Ref } from 'vue';
import { IEvent } from '@/core';
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
import { qrCodeProps } from './qr-code';
const props = defineProps(qrCodeProps);
const QRCodeConfig: Ref<{
	size?: number;
	url?: string;
	bgSrc?: string;
	margin?: number;
	backgroundColor?: string;
	logoSrc?: string;
	logoMargin?: number;
	logoBgColor?: string;
	logoRadius?: number;
	whiteMargin?: boolean;
}> = ref({});

onBeforeMount(() => {
	getQRCodeData();
});

const getQRCodeData = () => {
	if (props.value && typeof props.value == 'string') {
		const value = JSON.parse(props.value);
		const {
			size,
			url,
			bgSrc,
			margin,
			backgroundColor,
			logoSrc,
			logoMargin,
			logoBgColor,
			logoRadius,
			whiteMargin,
		} = value;
		QRCodeConfig.value = {
			size,
			url,
			bgSrc,
			margin,
			backgroundColor,
			logoSrc,
			logoMargin,
			logoBgColor,
			logoRadius,
			whiteMargin,
		};
	}
};
</script>
